<template>
  <div class="comVideoPreview" v-if="showDialog">
    <van-overlay :show="showDialog" @click="closeVideoDialog" z-index="9999" class-name="preview_videos">
      <div class="closeIcon">
        <van-icon name="close" @click="closeVideoDialog" />
      </div>

      <video @click.stop width="100%" height="220" id="videoEle" class="videoEle" x-webkit-airplay="true"
        x5-video-player-type="h5-page" x5-video-orientation="portraint" controls :poster="posterIMg">
        <source :src="sourcesSrc" type="video/mp4">
        <source :src="sourcesSrc" type="video/ogg">
        您的浏览器设备不支持视频播放，推荐下载【小米】浏览器！
      </video>

      <!--      <div class="wrapper" >
        <nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playEnd" v-if="showDialog"></nut-video>
      </div>-->

    </van-overlay>
  </div>
</template>

<script>
import posterIMg from "../assets/1.jpeg";
import { Toast } from "vant";

export default {
  name: "comVideoPreview",

  data() {
    return {
      showDialog: false,
      sourcesSrc: '',
      posterIMg: posterIMg,
      sources: [],
      options: {
        controls: true,
        poster: posterIMg,
      },
    }
  },

  mounted() {
    // 使用bus总线。
    this.$bus.$on('toPreviewAndPlayVideo', (videoUrl) => {
      if (videoUrl) {
        this.openVideoDialog(videoUrl)
      } else {
        Toast.fail('没有视频链接。')
      }
    });

  },

  destroyed() {
    // console.log('摧毁组件');
  },

  methods: {

    openVideoDialog(url) {
      this.showDialog = true;
      this.sourcesSrc = url;

      /*this.sources = [{
        src: url,
        type: 'video/mp4',
      }];*/

    },


    closeVideoDialog() {
      let video = document.getElementById('videoEle');
      if (video) {
        video.removeAttribute('src');
        video.remove();
        video.load();
      }

      this.showDialog = false;
      this.sourcesSrc = '';
      // this.$emit('removePreview');
      // this.$destroy();

    },


    play(elm) {
      console.log('play', elm)
    },
    pause(e) {
      console.log('pause')
    },
    playEnd(e) {
      Toast('播放结束')
    },

  }
}
</script>

<style lang="scss" scoped>
.comVideoPreview {
  box-sizing: border-box;

  // border: 30px solid red;
  .preview_videos {
    box-sizing: border-box;
    // border: 6px solid red;
    padding: 0 3px;

    .closeIcon {
      margin-top: 66px;
      font-size: 36px;
      text-align: right;
      color: #C8C9CC;
      padding-right: 16px;
      // border: 3px solid yellow;
    }

    .videoEle {
      margin-top: 66px;
      // border: 3px solid blue;
      object-fit: fill;
    }
  }


  /*/deep/ .preview_videos{
    box-sizing: border-box;

    .wrapper{
      // position: absolute;
      box-sizing: border-box;
      height: 100%;
      top: 0;
      bottom: 0;
      margin: auto ;
      border: 6px solid red;
      width: 100vh;
      .videoEle{
        border: 3px solid blue;

      }
    }

    // width: 100%;
    // height: 100vh;

    // border: 5px solid blue;
    // border: 3px solid blue;
    .wrapper_content{
      box-sizing: border-box;
      // text-align: right;
      border: 2px solid yellow;
      // overflow: auto;
      height: 100%;
      .closeIcon{
        margin-top: 50px;
        font-size: 30px;
        text-align: right;
        color: #C8C9CC;
        margin-right: 16px;
      }
      .wrapper{
        // position: absolute;
        box-sizing: border-box;
        height: 100%;
        top: 0;
        bottom: 0;
        margin: auto ;
        border: 6px solid red;
        width: 100vh;
        .videoEle{
          border: 3px solid blue;

        }
      }
    }
  }*/
}
</style>
